<template>
 <div>
  <header class="bar bar-nav" >
    <a class="button button-link button-nav pull-left" v-link="{path: '/home', replace: false}">
    <span class="icon icon-left"></span>
    </a>
    <h1 class="title">留学信息</h1>
  </header>
  <div class="content">
 <div class="row no-gutter">
 <div class="col-33 menu ">
  
  <a href="#" v-link="{path: '/study/college',replace: true}">
  <span class="icon icon-app beta" style="background:#FA1"></span><br/>
  英国大学</a>
 </div>
 <div class="col-33 menu ">
  
  <a href="#" v-link="{path:'/study/school',replace:true}">
   <span class="icon icon-browser beta" style="background:#0BC9D4"></span><br/>
  英国中学</a>
 </div>
 <div class="col-33 menu ">
  <a href="#" v-link="{path:'/study/steps',replace:true}">
     <span class="icon icon-card beta" style="background:#4CD964"></span><br/>
  大学申请流程</a>
 </div>
 </div>
 <div class='row no-gutter'>
 
 <div class="col-33  menu ">
  <a href="#" v-link="{path:'/study/material',replace:true}">
     <span class="icon icon-code beta" style="background:#1926E2"></span><br/>
  签证所需材料</a>
 </div>
 <div class="col-33  menu ">
  <a href="#" v-link="{path:'/study/partjob',replace:true}">
     <span class="icon icon-menu beta" style="background:#EF29B9"></span><br/>

  兼职信息</a>
 </div>
 </div>

</div>
 </div>
</template>
<script>
import Bar from '../../components/Bar'
import BarItem from '../../components/BarItem'
export default {
  components: {
    Bar,
    BarItem
  }
}
</script>

<style scoped>
.menu{
 height:5rem;
 text-align:center;
 font-size:14px;
 line-height:2rem;
}
.title2{
 box-shadow: 0px 1px 3px;
 color:#0894ec;
}

.home-bar {
  height: 2.8rem;
  position: relative;
  box-shadow: 0 .01rem .05rem rgba(0,0,0,.3);
}
.row .col-33{
  border-bottom:1px solid lightgray;
  border-right:1px solid lightgray;
}
.beta{
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  border-radius:30px;
}
</style>
